<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="userAccount"
          name="userAccount"
          label="邮箱"
          placeholder="请填写邮箱"
          :rules="[{ validator: validator , message: '邮箱不合规' }]"
      >
        <template #left-icon>
          <svg
              style="margin-top: 3px"
              t="1722673029650" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3716" width="18" height="18">
            <path d="M256 384c-12.8 57.6-6.4 115.2 6.4 166.4 12.8 44.8-6.4 89.6-44.8 115.2-57.6 32-128-12.8-134.4-70.4-57.6-300.8 211.2-576 518.4-518.4C422.4 96 288 217.6 256 384z" fill="#FFDC04" p-id="3717"></path><path d="M531.2 800c51.2-19.2 102.4-51.2 140.8-89.6 32-32 83.2-38.4 121.6-12.8 57.6 32 57.6 115.2 6.4 153.6-230.4 198.4-601.6 102.4-704-192C192 800 371.2 851.2 531.2 800z" fill="#E03A22" p-id="3718"></path><path d="M755.2 352c-44.8-38.4-96-64-147.2-76.8-44.8-12.8-76.8-51.2-76.8-96 0-64 70.4-108.8 128-83.2 288 102.4 390.4 467.2 185.6 704 76.8-153.6 32-339.2-89.6-448z" fill="#27AA3A" p-id="3719"></path><path d="M633.6 492.8c0-12.8 0-25.6-6.4-32 0-6.4 0-6.4-6.4-12.8 0-64-38.4-115.2-108.8-115.2S403.2 384 403.2 448c0 6.4-6.4 6.4-6.4 12.8-6.4 12.8-6.4 19.2-6.4 25.6v6.4c-12.8 6.4-25.6 25.6-32 44.8-12.8 32-12.8 64-6.4 64 6.4 6.4 19.2-6.4 32-19.2 0 19.2 12.8 38.4 25.6 51.2-12.8 0-25.6 12.8-25.6 25.6 0 19.2 25.6 32 64 32 32 0 57.6-12.8 64-25.6h6.4c6.4 12.8 32 25.6 64 25.6s64-12.8 64-32c0-12.8-12.8-19.2-25.6-25.6 12.8-12.8 25.6-25.6 32-44.8 12.8 19.2 25.6 25.6 32 19.2 12.8-6.4 6.4-32-6.4-64-19.2-32-32-44.8-44.8-51.2z" fill="#038BC5" p-id="3720"></path></svg>
        </template>
      </van-field>
      <van-field
          v-model="userPassword"
          left-icon="setting"
          type="password"
          name="userPassword"
          label="密码"
          placeholder="请填写密码(>=8)"
          :rules="[{ validator: validatorPassword , message: '密码长度不足8位' }]"
      />
      <van-field
          v-model="userPasswordConfirm"
          left-icon="setting"
          type="password"
          name="userPasswordConfirm"
          label="确认密码"
          placeholder="请填写密码(>=8)"
          :rules="[{ validator: validatorPasswordConfirm , message: '密码长度不足8位' }]"
      >
        <template #left-icon>
          <svg style="margin-top: 3px"
              t="1722676456946" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7139" width="18" height="18"><path d="M803.704 382.838667l-1.506667 0 0-71.406667c0.413333-6.689333 0.686667-13.242667 0.686667-19.8 0-77.96-30.446667-151.14-85.606667-206.3-55.16-55.022667-128.613333-85.333333-206.713333-85.333333S359.012 30.309333 303.852 85.469333s-85.606667 128.34-85.606667 206.302667l0 91.066667 2.046667 0c-79.046667 0-143.36 64.169333-143.36 142.946667l0 355.265333c0 78.913333 64.313333 142.946667 143.36 142.946667l583.412 0c79.053333 0 143.36-64.173333 143.36-142.946667L947.064 525.785333C947.064 446.872 882.757333 382.838667 803.704 382.838667zM284.058667 291.632c0-124.653333 101.58-225.96 226.506667-225.96s226.513333 101.442667 226.513333 225.96c0 5.326667-0.14 10.786667-0.546667 16.249333l-0.14 1.090667 0 73.593333L284.058667 382.565333 284.058667 291.632zM754.012 612.758667 478.205333 880.224c-12.693333 12.293333-32.9 12.02-45.326667-0.68l-133.666667-137.893333c-12.286667-12.706667-12.013333-32.906667 0.68-45.333333 12.7-12.293333 32.906667-12.013333 45.193333 0.68l111.413333 114.826667 252.725333-245.08c12.693333-12.286667 32.906667-12.013333 45.193333 0.68C766.978667 580.265333 766.572 600.465333 754.012 612.758667z" fill="#000000" p-id="7140"></path></svg>
        </template>
      </van-field>
      <van-field
          v-model="userCode"
          center
          type="digit"
          name="userCode"
          label="验证码"
          placeholder="请填写验证码"
      >
        <template #left-icon>
          <svg style="margin-top: 5px"
              t="1722673352128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5044" id="mx_n_1722673352129"
               width="18" height="18">
            <path d="M943.1 172c-2.4-0.2-245.1-25.3-413.8-147.8-5.1-3.7-11-5.6-17.3-5.6-6.2 0-12.2 1.9-17.3 5.6C326.9 146 83.3 171.8 80.9 172c-15.2 1.4-26.6 14.1-26.6 29.3 0 6.7 0.6 165.8 54.8 344.4 32.1 105.8 76.4 196.4 131.9 269.2 70.3 92.3 158.5 156 262 189.2 2.9 0.9 5.9 1.4 9 1.4s6.1-0.5 8.9-1.4c103.6-33.2 191.7-96.8 262-189.2 55.4-72.7 99.8-163.2 131.9-269.2 54.1-178.6 54.8-337.7 54.8-344.4C969.7 186.1 958.3 173.5 943.1 172zM910.1 227.2l-0.1 1.6c-2.9 58.1-13.4 174.4-51.4 299.9-66.7 220.1-183.1 360.1-346 416.1L512 945l-0.6-0.2C349 888.9 232.7 749.4 165.8 530.1c-39.8-130.5-49.4-254.2-51.8-301.4l-0.1-1.6 1.5-0.2c70.6-10.3 250.5-44.8 395.5-142.4l0.9-0.7 1 0.7C658 182.1 837.9 216.6 908.5 227L910.1 227.2z" p-id="5045" fill="#000000"></path><path d="M641.8 351 467 580.3l-89-76.1c-5.3-4.5-12.1-7-19.1-7-8.6 0-16.8 3.7-22.4 10.3-10.5 12.3-9.1 31 3.3 41.5l112.7 96.4c5.2 4.4 12.4 7 19.6 7 0.9 0 1.8 0 2.7-0.1 8-0.8 15.4-5 20.3-11.4l193.7-254c4.8-6.3 6.8-14 5.7-21.8-1-7.8-5.1-14.7-11.3-19.5C670.1 335.6 651.6 338.1 641.8 351z" p-id="5046" fill="#000000"></path></svg>
        </template>
        <template #button>
          <van-button v-if="!countdown" @click="sendCode" size="small" type="primary">发送验证码</van-button>
          <van-button v-else size="small">{{ remainingTime }}s</van-button>
        </template>
      </van-field>
    </van-cell-group>

    <div style="
    color: #1677ff;
    font-size: 16px;
    margin-right: 32px;
    display: flex;
    justify-content: flex-end;
    ">
      <span @click="toLogin">返回登录</span>
    </div>

    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        注册
      </van-button>
    </div>

  </van-form>
</template>


<script setup lang="ts">
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {sendEmail} from "../../api/emailApi.ts";
import {showToast} from "vant";
import {registerEmail} from "../../api/userApi.ts";

const userAccount = ref('');
const userPassword = ref('');
const userPasswordConfirm = ref('');
const userCode = ref('');
const router = useRouter();
const route = useRoute();
const countdown = ref(false);
const remainingTime = ref(60);

console.log("redirect",route.query?.redirect);


// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = () => userAccount.value.includes('@qq.com');
// 校验函数返回 true 表示校验通过，false 表示不通过
const validatorPassword = () => {
  return userPassword.value.length >= 8 ;
}
// 校验函数返回 true 表示校验通过，false 表示不通过
const validatorPasswordConfirm = () => {
  return userPasswordConfirm.value.length >= 8;
}

const onSubmit = () => {
  register();
};

//返回登录
const toLogin = ()=>{
  router.push('/');
}

//发送验证码方法
const sendCode = ()=>{
  //不能一直发送
  if (remainingTime.value!=60){
    return;
  }

  //校验
  if (userAccount.value == ''){
    showToast("请填写邮箱");
    return;
  }
  if (!userAccount.value.includes('@qq.com') || userAccount.value.length != 17){
    showToast("邮箱不正确");
    return;
  }

  //邮箱形式发送验证码
  sendEmail(userAccount.value).then(res =>{
    console.log("res",res);
    if (200 == res.code){//成功
      showToast("验证码已发送");
      countdown.value = true;
      const timer = setInterval(() => {
        if (remainingTime.value > 0) {
          remainingTime.value--;
        } else {
          clearInterval(timer);
          countdown.value = false;
          remainingTime.value = 60;
        }
      }, 1000);
    }else {//失败
      showToast(res.data);
    }
  }).catch(error => {
    showToast("错误");
  });
};

//注册按钮
const register = ()=>{
  if(userPassword.value.length < 8 || userPasswordConfirm.value.length < 8){
    showToast("密码不合规");
    return;
  }

  if (userAccount.value.length != 17 || !userAccount.value.includes('@qq.com')){
    showToast("邮箱不正确");
    return;
  }

  if (userPassword.value != userPasswordConfirm.value){
    showToast("密码不正确");
    return;
  }

  if (userCode.value == ''){
    showToast("请填写验证码");
    return;
  }

  const data = {
    userAccount: userAccount.value,
    userPassword : userPassword.value,
    checkPassword: userPasswordConfirm.value,
    code: userCode.value
  };
  registerEmail(data).then(res=>{
      if (200 === res.code){
        //注册成功,跳转到账户显示页面
        if (res.data != null){
          router.push({
            path: '/register/success',
            query : {
              account: res.data,
            }
          });
        }
      }else {
        //提示错误信息
        showToast(res.data);
      }
  });
};



</script>



<style scoped>

</style>